<template>
  <div class="dv1">
    <div>
      <van-nav-bar
          title="新用户注册"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>

    <div class="dv2">
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="user2.phone" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
        <van-field
            v-model="user2.code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">发送验证码</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="success" @click="loginCode()">
            下一步
          </van-button>
        </div>
      </van-cell-group>
    </div>
  </div>


</template>

<script>
export default {
  name:"RegisterView",
  data(){
    return{
      active:0,
      btn1:true,
      user2:{//手机号验证码
        phone:"",
        code:"",
        city: "郑州",
        mobie: "小米"
      },
    }
  },
  methods: {
    checkPhone() {
      //校验手机号是否存在
      this.axios.get("/api/user/checkregister.do?phone=" + this.user2.phone).then((r) => {
        if (r.data.code == 200) {
          this.btn1 = false;
          this.$toast("亲,请点击发送验证码哦")
        } else {
          this.btn1 = true;
          this.$toast("亲，你的手机号已注册哦")
        }
      })
    },
    onClickLeft() {
      history.back()
    },


    sendCode() {
      //发送验证码
      this.axios.get("api/sms/sendregister.do?phone=" + this.user2.phone).then((r) => {
        if (r.data.code == 200) {
          //存在  可以发送验证码
          this.btn1 = false;
          this.$toast("亲，验证码发送成功，请查看手机！");

        } else {

          this.btn1 = true;
          this.$toast("亲，手机是不是欠费！");
        }
      })
    },


   loginCode(){
     this.$router.push({path:"registersucceed",query:{phones:this.user2.phone,codes:this.user2.code}});

      //验证码注册
  //     this.axios.post("api/user/register.do",this.user2).then((r)=>{
  //       if(r.data.code==200){
  //         this.$store.commit("setToken",r.data.data);
  //         //成功 跳转到首页
  //         this.$router.push("/registersucceed");
  //       }else {
  //         this.$toast(r.data.msg);
  //       }
  //     })
    },
  //
   }
}

</script>

<style scoped>
.dv1{
  height:670px ;
  background: url(https://ts1.cn.mm.bing.net/th/id/R-C.c386886de4e805ef85264c1dc9dca728?rik=%2bTCzu7hMyFHcEw&riu=http%3a%2f%2fwww.chuquwanwanba.com%2fuploads%2fimage2%2f20200803%2f1596415209889.gif&ehk=sbXAbOo3Be8HB82FZwsJCuxfSVyxsSS1%2fsboj3EU1M4%3d&risl=&pid=ImgRaw&r=0) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.dv2{
  opacity: 0.9;
  margin-top: 120px ;
}

</style>